<template>
  <div class="car-list">
    <div class="form">
      <el-row>
        <el-col :span="6">
          <span style="font-size: 12px; margin-right: 4px">时间</span>
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 12px; margin-right: 4px">车牌号</span>

          <el-select
            v-model="dg.carNumber"
            clearable
            filterable
            placeholder="选择车牌号"
          >
            <el-option
              v-for="item in carNumList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 12px; margin-right: 4px">驾驶员</span>
          <el-select
            v-model="dg.driver"
            clearable
            filterable
            placeholder="选择驾驶员"
          >
            <el-option
              v-for="it in driverList"
              :key="it.id"
              :label="it.name"
              :value="it.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span style="font-size: 12px; margin-right: 4px">运营性质</span>

          <el-select
            v-model="dg.yunying"
            clearable
            filterable
            placeholder="选择运营性质"
          >
            <el-option :label="'县际业务'" :value="'COUNTY_SER'"></el-option>
            <el-option :label="'市际业务'" :value="'CITY_SER'"></el-option>
            <el-option :label="'省际业务'" :value="'PROVINCE_SER'"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 12px; margin-right: 4px">座位数</span>

          <el-select
            v-model="dg.seats"
            clearable
            filterable
            placeholder="请选择座位数"
            style="width: 100%"
          >
            <el-option
              v-for="(it, index) in seatsList"
              :key="index + 'info'"
              :label="it"
              :value="it"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 12px; margin-right: 4px">排序方式</span>
          <el-select
            v-model="dg.seats"
            clearable
            filterable
            placeholder="选择排序方式"
          >
            <el-option
              v-for="it in sortList"
              :key="it.id"
              :label="it.name"
              :value="it.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-button type="primary">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="amount1" sortable label="数值 1">
        </el-table-column>
        <el-table-column prop="amount2" sortable label="数值 2">
        </el-table-column>
        <el-table-column prop="amount3" sortable label="数值 3">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getAllSeats, //  座位数
  getAllPlateNum, // 车牌号
  getFsindDriverList, // 驾驶员
} from "@/api/services/logistics.service";

export default {
  name: "ProfitListCar",
  data() {
    return {
      // 车牌号
      carNumList: [{ id: 1, name: 1 }],
      // 驾驶员
      driverList: [{ id: 1, name: 1 }],
      // 座位数
      seatsList: [],
      // 排序
      sortList: [{ id: 1, name: 1 }],

      dg: {
        carNumber: "",
        driver: "",
        seats: "",
        sort: "",
      },
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  created() {
    this.getCarNumList();
    this.getDriverList();
    this.getSeatsList();
  },
  methods: {
    // 获取车牌号
    getCarNumList() {
      getAllPlateNum({ status: 0 }).then((res) => {
        this.carNumList = Object.keys(res.plateNums).map((item) => ({
          label: item,
          value: item,
        }));
      });
    },
    // 获取驾驶员
    getDriverList() {
      getFsindDriverList({
        page: 1,
        rows: 9999,
        find: "",
        groupId: "",
      }).then((res) => {
        console.log(res, "驾驶员列表");
      });
    },
    // 获取座位数
    getSeatsList() {
      getAllSeats({ minSeats: 0 })
        .then((res) => {
          console.log("res123", res);
          const { code, seats } = res;
          if (code == 1) {
            this.seatsList = seats;
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style scoped>
.form {
  margin-bottom: 10px;
}
</style>